<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>className修改样式属性</title>
   <style>
       div{
           width: 100px;
           height: 100px;
           background-color: pink;
       }
       .ha{
          color: #fff;
          font-size: 25px;
          margin-top: 100px;
           background-color: blue;
       }
   </style>
</head>
<body>
    <!-- 注意 ：如果样式修改比较多，可以采用操作类名方式更改元素样式
          class 因为是保留字 因此使用 className 来操作元素类名属性
          className 会直接更改元素的类名，会覆盖原先的类名 -->

          <div class="zz">文本</div>

          <script>
              var text = document.querySelector('div');
              text.onclick = function(){
                  // 让我们当前元素的类名 改为了 ha
                //   this.className = 'ha';
                // 如果 想要保留原先的类名 我们可以这样做 多类名选择器
                this.className = 'zz ha';
              }
          </script>
</body>
</html>